<template>
  <div class="committee-wrapper q-pb-xl relative-position" style="min-height: 400px">
    <div
      class="absolute-center column"
      v-if="!loaded">
      <q-spinner-gears size="50px" color="primary" />
      <div class="loading-label">{{ $t('查询中') }}</div>
    </div>

    <!-- 未加入 -->
    <div v-if="loaded && !data?.status && data?.status !== void 0">
      <q-btn
        class="apply-btn bg-primary text-white" flat :label="$t('申请加入')" @click="toJoin"></q-btn>
      <div
        class="not-a-member-yet full-width text-center">
        {{ $t('暂未加入信标委TC28会员') }}
      </div>
    </div>

    <div v-if="loaded && data.status === void 0" class="not-a-member-yet">
      不具备申请成为成员单位的权限
    </div>
  </div>
</template>

<script>
import mixins from 'eis-admin-mixins';
import { RefreshOnLocaleChange } from '../../components/mixins/locale';

export default {
  name: 'CommitteeUc',
  mixins: [mixins.ObjectDataMixin, RefreshOnLocaleChange, mixins.InputFieldValidator],
  data() {
    return {
      loaded: false,
      payment: {},
    };
  },
  methods: {
    afterRefresh() {
      if (this.data.id) {
        this.$router.replace(`/uc/committee/${this.data.id}`);
      }

      this.loaded = true;
    },
    toJoin() {
      this.postRequest('stdcomm/start').then((newFlow) => {
        if (newFlow && newFlow.msg === 'OK') {
          const flow = (newFlow && newFlow.data) ? newFlow.data : {};

          if (flow && flow.id) {
            this.$router.push(`/uc/committee/${flow.id}`);
          } else {
            this.$q.notify(this.$t('申请加入失败'));
          }
        } else {
          this.$q.notify(this.$t('申请加入失败'));
        }
      }).catch(() => {
        this.$q.notify(this.$t('申请加入失败'));
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.committee-wrapper {
  .apply-btn {
    position: absolute;
    right: 24px;
    top: -60px;
    border-radius: 5px;
  }

  .loading-label {
    padding: 16px 0;
    color: rgba(188, 188, 188, 1);
    font-size: 16px;
    text-align: center;
    font-family: SourceHanSansSC-regular;
  }

  .not-a-member-yet {
    padding: 150px 0;
    color: rgba(188, 188, 188, 1);
    font-size: 14px;
    text-align: center;
    font-family: SourceHanSansSC-regular;
  }
}
</style>
